
import {createIncrementAction, createDecrementAction, createIncrementAsyncAction} from '../../redux/count_action'

// 引入connect用于连接UI组件与redux
import { connect } from 'react-redux'

import React, { Component } from 'react'


class Count extends Component {


  increment = ()=> {
    const {value} = this.selectNumber
    this.props.jia(value*1)
  }

  decrement = ()=> {
    const {value} = this.selectNumber
    this.props.jian(value*1)
  }

  incrementIfOdd =()=> {
    const {value} = this.selectNumber
    if(this.props.count % 2 === 1){
      this.props.jia(value*1)
    }
  }

  incrementAsync =()=>{
    const {value} = this.selectNumber
    this.props.jiaAsync(value*1, 500)
  }

  render() {
    return (
      <div>
        <h2>我是Count组件, 下面组件的人数为：{this.props.nums}</h2>
        <h4>当前求和为:{this.props.count}</h4>
        <select ref={c=> this.selectNumber = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数时再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

export default connect(
  state => ({count: state.count, nums: state.persons.length}),
  {
    // 只要UI组件中一调用，这里的函数就会创建一个action对象，并且react-redux会自动dispacth.
    jia: createIncrementAction,
    jian: createDecrementAction,
    jiaAsync: createIncrementAsyncAction,
  }
)(Count)